<template>
    <div class="register-page">
      <!-- 背景层 -->
      <div class="background"></div>

      <!-- 注册框 -->
      <div class="register-box">
        <el-form :model="registerForm" :rules="registerRules" ref="registerForm">
          <el-form-item prop="shopName">
            <el-input
              v-model="registerForm.shopName"
              placeholder="请输入商家名"
              prefix-icon="el-icon-user">
            </el-input>
          </el-form-item>

          <el-form-item prop="shopPass">
            <el-input
              v-model="registerForm.shopPass"
              type="password"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock">
            </el-input>
          </el-form-item>

          <el-form-item prop="shopPhone">
            <el-input
              v-model="registerForm.shopPhone"
              placeholder="请输入手机号"
              prefix-icon="el-icon-phone">
            </el-input>
          </el-form-item>

          <el-form-item prop="code">
            <el-input
              v-model="registerForm.code"
              placeholder="请输入验证码"
              prefix-icon="el-icon-message">
            </el-input>
            <el-button
              type="text"
              class="send-code-button"
              @click="sendCode"
              :disabled="sendingCode">
              {{ sendingCode ? `${countdown}s 后重发` : '发送验证码' }}
            </el-button>
          </el-form-item>

          <el-button
            type="primary"
            class="submit-button"
            @click="submitRegisterForm">
            注册
          </el-button>
        </el-form>
      </div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        registerForm: {
          shopName: "",
          shopPass: "",
          shopPhone: "",
          code: "",
        },
        sendingCode: false, // 是否在发送验证码
        countdown: 60, // 验证码倒计时
        timer: null, // 定时器
        registerRules: {
          shopName: [
            { required: true, message: "请输入用户名", trigger: "blur" },
            { min: 2, max: 20, message: "用户名长度为2-20个字符", trigger: "blur" },
          ],
          shopPass: [
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 6, message: "密码长度不能少于6个字符", trigger: "blur" },
          ],
          shopPhone: [
            { required: true, message: "请输入手机号", trigger: "blur" },
            { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
          ],
          code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        },
      };
    },
    methods: {
      sendCode() {
        if (this.sendingCode) return; // 防止重复点击
        if (!/^1[3-9]\d{9}$/.test(this.registerForm.shopPhone)) {
          this.$message.error("请输入正确的手机号！");
          return;
        }

        // 调用后端发送验证码的接口
        this.$http.get("/market/shopInfo/sendShopRegisterCode", {params:{ mobile: this.registerForm.shopPhone }})
          .then((response) => {
            if (response.data.code === 200) {
              this.$message.success("验证码已发送，请注意查收！");
              this.sendingCode = true; // 开始倒计时
              this.countdown = 60;
              this.timer = setInterval(() => {
                this.countdown -= 1;
                if (this.countdown === 0) {
                  clearInterval(this.timer);
                  this.sendingCode = false; // 恢复发送按钮
                }
              }, 1000);
            } else {
              this.$message.error(response.data.message || "验证码发送失败！");
            }
          })
          .catch((error) => {
            console.error("发送验证码失败：", error);
            this.$message.error("验证码发送失败，请稍后再试！");
          });
      },
      submitRegisterForm() {
        this.$refs.registerForm.validate((valid) => {
          if (valid) {
            this.$message.success("注册成功！");
            // 调用后端注册接口
            this.$http.post("/market/shopInfo/shopInfoRegister", this.registerForm).then((response) => {
              if (response.data.code === 200) {
                this.$message.success("注册成功！");
                this.$router.push("/marketlogin");
              } else {
                this.$message.error(response.data.message || "注册失败！");
              }
            });
          } else {
            this.$message.error("请填写完整表单！");
          }
        });
      },
    },
    destroyed() {
      if (this.timer) clearInterval(this.timer);
    },
  };
  </script>

  <style scoped>
  /* 页面布局 */
  .register-page {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Arial", sans-serif;
  }

  /* 背景层 */
  .background {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(10px) brightness(0.8);
    z-index: -1;
  }

  /* 注册框样式 */
  .register-box {
    width: 400px;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
    transition: all 0.3s ease;
  }

  /* 提交按钮 */
  .submit-button {
    width: 100%;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: #fff;
    border: none;
    font-weight: bold;
    border-radius: 10px;
    transition: all 0.3s ease;
  }

  .submit-button:hover {
    background: linear-gradient(135deg, #2575fc, #6a11cb);
  }

  /* 验证码按钮 */
  .send-code-button {
    color: #409eff;
    font-size: 12px;
    padding: 0;
  }
  </style>
